/**
* 模版
**/ 

<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{title[0]}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{title[1]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>{{title[1]}}</h3>

      </el-header>
      <el-container>
        <div>
          <el-form :inline="true"
                   :model="formInline"
                   class="user-search">
            <h3 style="text-align: center">当前学生所有考试</h3>
            <el-form-item label="考试名称：">
              <el-input size="large"
                        v-model="formInline.testName"
                        placeholder="请输入"
                        clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button size="large"
                         type="primary"
                         icon="el-icon-search"
                         @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-main>
          <el-container>
            <template>
              <el-table ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        border
                        @current-change="handleCurrentChange"
                        style="width: 100%">
                <el-table-column property="test_code"
                                 label="考试编号"
                                 width="160">
                </el-table-column>
                <el-table-column property="test_name"
                                 label="考试名称"
                                 width="240">
                </el-table-column>
                <el-table-column label="开考时间"
                                 width="240">
                  <template slot-scope="scope">{{ scope.row.test_startTime | dateFormat}}</template>
                </el-table-column>
                <el-table-column label="结束时间"
                                 width="240">
                  <template slot-scope="scope">{{ scope.row.test_endTime | dateFormat}}</template>
                </el-table-column>

                <el-table-column label="考试状态"
                                 width="260">
                  <div slot-scope="scope">
                    <div v-if="(scope.row.timeflag) == -1">
                      <el-button type="danger"
                                 @click="lookPaper(scope.row.test_paper)">考试已结束,点击查看试卷</el-button>
                    </div>
                    <div v-if="(scope.row.timeflag) == 0">
                      <el-button type="info">考试未开始</el-button>
                    </div>
                    <div v-if="(scope.row.timeflag) == 1">
                      <el-button type="success"
                                 @click="goExam(scope.row)">考试进行中,点击参加考试</el-button>
                    </div>
                  </div>
                </el-table-column>

              </el-table>

            </template>

          </el-container>
        </el-main>

        <el-footer>

          <Pagination v-bind:child-msg="pageparm"
                      @callFather="callFather"></Pagination>
        </el-footer>
      </el-container>

    </el-container>
    <el-dialog title="已有考试在进行或将有考试！快参加考试！"
               :visible.sync="show"
               width="40%"
               @click='closeDialog'>

    </el-dialog>
  </div>
</template>

<script>
// 导入组件
// import headerComponent from "./head.vue";
// 导出模块
import {
  findOnesTest,
  findAllOnesTest,
  doExam,
  dooExam,
} from '../../api/testMG'
import Pagination from '../../components/Pagination'
export default {
  // 模块名字
  name: 'template',
  // 模块数据
  data() {
    //数据
    return {
      time: '',
      loading: '',
      tableData: [],
      showData: [],
      show: false,
      title: '',
      formInline: {
        page: 1,
        limit: 10,
        testName: '',
        userId: '',
        user: '',
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      //结束时间
      endTime: Date,
    }
  },
  // 注册组件
  components: {
    // headerComponent
    Pagination,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    goExam(parameter) {
      doExam(parameter.test_paper).then(() => {
        this.endTime = parameter.test_endTime
        this.$store.commit('getEndtime', {
          endtime: this.endTime,
        })
        this.$store.commit('getPaperId', {
          paperid: parameter.test_paper,
        })
        let a = {
          exam_id: parameter.test_paper,
        }
        dooExam(a).then((res) => {
          localStorage.setItem('paperItem', res.data.data)
          this.$router.push({ path: '/system/examing' })
        })
      })
    },
    open() {
      this.$notify.info({
        title: '消息',
        message: '这是一条消息的提示消息',
      })
    },
    handleEdit() {},
    getdata(parameter) {
      ;(this.loading = true),
        /***
         * 调用接口，渲染题目列表
         */
        findAllOnesTest(parameter)
          .then((res) => {
            this.loading = false
            if (res.data.code != 200) {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            } else {
              this.tableData = res.data.data.list
              this.time = new Date()
              for (let a in this.tableData) {
                this.tableData[a].timeflag = ''
                // this.tableData[a].timeflag =
                if (
                  this.$moment(this.time).format('YYYY-MM-DD HH:mm:ss') <
                  this.$moment(this.tableData[a].test_startTime).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )
                ) {
                  //未开始
                  this.tableData[a].timeflag = 0
                } else if (
                  this.$moment(this.time).format('YYYY-MM-DD HH:mm:ss') >
                  this.$moment(this.tableData[a].test_endTime).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )
                ) {
                  //已结束
                  this.tableData[a].timeflag = -1
                } else {
                  //进行中
                  this.tableData[a].timeflag = 1
                }
              }
              // console.log(this.tableData)
              // 分页赋值
              this.pageparm.currentPage = this.formInline.page
              this.pageparm.pageSize = this.formInline.limit
              this.pageparm.total = res.data.total
            }
          })
          .catch((err) => {
            this.loading = false
            this.$message.error('获取列表失败，请稍后再试！')
          })
    },
    search() {
      this.getdata(this.formInline)
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    onSubmit() {
      console.log('submit!')
    },
    closeDialog() {
      this.show = false
    },
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //查看历史试卷详情
    lookPaper(parameter) {
      let a = JSON.parse(localStorage.getItem('userdata')).data.id
      let b = [a, parameter]
      // 读取学生试卷详情
      this.$router.push({
        path: '/text_paper/stupaperView',
        query: { b },
      })
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    this.title = this.$route.name.split('/')
    this.formInline.userId = JSON.parse(
      localStorage.getItem('userdata')
    ).data.id
    this.formInline.user = JSON.parse(localStorage.getItem('userdata')).data
    this.getdata(this.formInline)
    findOnesTest(this.formInline.user)
      .then((res) => {
        if (res.data.data != null) {
          this.show = true
          this.showData = res.data.data
          console.log('showData' + this.showeData)
        }
      })
      .catch((err) => {})
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
.el-form {
  background-color: #a4f0c0;
  color: #333;
}
</style>
